今年开搞了,搭建一下vue开发环境

　　更新文档,具体做出来的项目已经整理的相关的教程, 我直接贴过来吧.

Node.js 安装

Node.js 安装包及源码下载地址为：https://nodejs.org/en/download/。你可以根据不同平台系统选择你需要的 Node.js 安装包。

Windows 上安装 Node.js

Windows 安装包(.msi)

32 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi 64 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi

本文实例以 v0.10.26 版本为例做演示，其他版本类似（根据实际项目情况选择版本安装），安装步骤：步骤 1 : 双击下载后的安装包 v0.10.26 步骤 2 : 点击以上的Run(运行),点击 next（下一步）按钮步骤 3 : 勾选接受协议选项，点击 next（下一步）按钮步骤 4 : Node.js默认安装目录为 “C:\Program Files\nodejs” , 你可以修改目录，并点击 next（下一步）步骤 5 : 点击树形图标来选择你需要的安装模式 , 然后点击下一步 next（下一步）步骤 6 :点击 Install（安装）开始安装Node.js。你也可以点击 Back（返回）来修改先前的配置。然后并点击 next（下一步）

检测PATH环境变量是否配置了Node.js，点击开始=》运行=》输入”cmd” => 输入命令”path”，输出如下结果： PATH=C:\oraclexe\app\oracle\product\10.2.0\server\bin;C:\Windows\system32; C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0; c:\python32\python;C:\MinGW\bin;C:\Program Files\GTK2-Runtime\lib; C:\Program Files\MySQL\MySQL Server 5.5\bin;C:\Program Files\nodejs; C:\Users\rg\AppData\Roaming\npm

我们可以看到环境变量中已经包含了C:\Program Files\nodejs\

检查Node.js版本,命令：node -v

Linux 上安装 Node.js

直接使用已编译好的包 Node 官网已经把 linux 下载版本更改为已编译好的版本了，我们可以直接下载解压后使用：

wget https://nodejs.org/dist/v10.9.0/node-v10.9.0-linux-x64.tar.xz // 下载

tar xf node-v10.9.0-linux-x64.tar.xz // 解压

cd node-v10.9.0-linux-x64/ // 进入解压目录

./bin/node -v // 执行node命令查看版本

v10.9.0

解压文件的 bin 目录底下包含了 node、npm 等命令，我们可以使用 ln 命令来设置软连接： ln -s /usr/software/nodejs/bin/npm /usr/local/bin/ ln -s /usr/software/nodejs/bin/node /usr/local/bin/

Ubuntu 源码安装 Node.js

以下部分我们将介绍在 Ubuntu Linux 下使用源码安装 Node.js 。其他的 Linux 系统，如 Centos 等类似如下安装步骤。

在 Github 上获取 Node.js 源码：

$ sudo git clone https://github.com/nodejs/node.git Cloning into \’node\’… 修改目录权限：

$ sudo chmod -R 755 node 使用 ./configure 创建编译文件，并按照：

$ cd node $ sudo ./configure $ sudo make $ sudo make install 查看 node 版本：

$ node –version v0.10.25

Ubuntu apt-get命令安装

命令格式如下：

sudo apt-get install nodejs sudo apt-get install npm CentOS 下源码安装 Node.js 1、下载源码，你需要在https://nodejs.org/en/download/下载最新的Nodejs版本，本文以v0.10.24为例:

cd /usr/local/src/ wget http://nodejs.org/dist/v0.10.24/node-v0.10.24.tar.gz 2、解压源码

tar zxvf node-v0.10.24.tar.gz 3、编译安装

cd node-v0.10.24 ./configure –prefix=/usr/local/node/0.10.24 make make install 4、配置NODE_HOME，进入profile编辑环境变量

vim /etc/profile 设置 nodejs 环境变量，在 export PATH USER LOGNAME MAIL HOSTNAME HISTSIZE HISTCONTROL 一行的上面添加如下内容:

set for nodejs

export NODE_HOME=/usr/local/node/0.10.24 export PATH=$NODE_HOME/bin:$PATH :wq保存并退出，编译/etc/profile 使配置生效

source /etc/profile 验证是否安装配置成功

node -v 输出 v0.10.24 表示配置成功

npm模块安装路径

/usr/local/node/0.10.24/lib/node_modules/ 注：Nodejs 官网提供了编译好的 Linux 二进制包，你也可以下载下来直接应用。

Vue.js 安装

NPM 方法大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。

淘宝 NPM 镜像是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟一次以保证尽量与官方服务同步。

你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

$ npm install -g –registry=https://registry.npm.taobao.org

在用 Vue.js 构建大型应用时推荐使用 NPM 安装：

全局安装 vue-cli

$ npm install –global vue-cli

创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

这里需要进行一些配置，默认回车即可

This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project ? Project description A Vue.js project ? Author runoob ? Vue build standalone ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Setup unit tests with Karma + Mocha? Yes ? Setup e2e tests with Nightwatch? Yes

vue-cli · Generated “my-project”.

To get started:

 cd my-project
 npm install
 npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

进入项目，安装并运行： $ cd my-project $ cnpm install $ cnpm run dev DONE Compiled successfully in 4388ms

Listening at http://localhost:8080

4、可视化管理之（vue ui） vue-cli 3.0 版本为我们提供了集创建、管理、分析为一体的可视化界面vue ui：

安装最新版的vue-cli

npm install -g @vue/cli

检查vue-cli版本

vue -V

运行 vue ui

vue ui

Vue CLI 3 项目构建基础配置

查看 node 版本

node -v

查看 npm 版本

npm -v

脚手架vue-cli

安装 Vue CLI 3.x

npm i -g @vue/cli 安装完 vue-cli 后，我们在你想要创建的项目目录地址下执行构建命令

my-project 是你的项目名称

vue create my-project

可视化界面

除了使用上述命令行构建外， vue-cli 3.x 还提供了可视化的操作界面，在项目目录下我们运行如下命令开启图形化界面： Image text

webpack 在 CLI 3 中的应用

3.1 与 vue-cli 2.x 的差异如果你使用过 vue-cli 2.x ，那么你应该了解其构建出的目录会包含相应的 webpack 配置文件，但是在 vue-cli 3.x 中你却见不到一份关于 webpack 的配置文件，难道 3.x 抛弃了 webpack？其实不然， 3.x 提供了一种开箱即用的模式，即你无需配置 webpack 就可以运行项目，并且它提供了一个 vue.config.js 文件来满足开发者对其封装的 webpack 默认配置的修改

vue.config.js 的配置 a. baseurl 你想要将项目地址加一个二级目录，比如： http://localhost:8080/vue/ ，那么我们需要在 vue.config.js 里配置 baseurl 这一项

// vue.config.js module.exports = { …

baseUrl: \'vue\',

...

} 其改变的其实是 webpack 配置文件中 output 的 publicPath 项，这时候你重启终端再次打开页面的时候我们首页的 url 就会变成带二级目录的形式。

b. outputDir 如果你想将构建好的文件打包输出到 output 文件夹下（默认是 dist 文件夹），你可以配置

// vue.config.js module.exports = { …

outputDir: \'output\',

...

} 然后运行命令 yarn build 进行打包输出，你会发现项目跟目录会创建 output 文件夹，这其实改变了 webpack 配置中 output 下的 path 项，修改了文件的输出路径

c. productionSourceMap 该配置项用于设置是否为生产环境构建生成 source map ，一般在生产环境下为了快速定位错误信息，我们都会开启 source map ：

// vue.config.js module.exports = { …

productionSourceMap: true,

...

} 该配置会修改 webpack 中 devtool 项的值为 source-map

d. chainWebpack chainWebpack 配置项允许我们更细粒度的控制 webpack 的内部配置，其集成的是 webpack-chain 这一插件，该插件可以让我们能够使用链式操作来修改配置，比如

// 用于做相应的合并处理 const merge = require(\’webpack-merge\’);

module.exports = { …

// config 参数为已经解析好的 webpack 配置
chainWebpack: config => {
    config.module
        .rule(\'images\')
        .use(\'url-loader\')
        .tap(options =>
            merge(options, {
              limit: 5120,
            })
        )
}

...

} 以上操作我们可以成功修改 webpack 中 module 项里配置 rules 规则为图片下的 url-loader 值，将其 limit 限制改为 5M，修改后的 webpack 配置代码如下：

{ …

module: {
    rules: [
        {   
            /* config.module.rule(\'images\') */
            test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
            use: [
                /* config.module.rule(\'images\').use(\'url-loader\') */
                {
                    loader: \'url-loader\',
                    options: {
                        limit: 5120,
                        name: \'img/[name].[hash:8].[ext]\'
                    }
                }
            ]
        }
    ]
}

...

} e. configureWebpack 除了上述使用 chainWebpack 来改变 webpack 内部配置外，我们还可以使用 configureWebpack 来进行修改，两者的不同点在于 chainWebpack 是链式修改，而 configureWebpack 更倾向于整体替换和修改。示例代码如下

// vue.config.js module.exports = { …

// config 参数为已经解析好的 webpack 配置
configureWebpack: config => {
    // config.plugins = []; // 这样会直接将 plugins 置空
    
    // 使用 return 一个对象会通过 webpack-merge 进行合并，plugins 不会置空
    return {
        plugins: []
    }
}

...

} configureWebpack 可以直接是一个对象，也可以是一个函数，如果是对象它会直接使用 webpack-merge 对其进行合并处理，如果是函数，你可以直接使用其 config 参数来修改 webpack 中的配置，或者返回一个对象来进行 merge 处理

你可以在项目目录下运行 vue inspect 来查看你修改后的 webpack 完整配置，当然你也可以缩小审查范围，比如

只查看 plugins 的内容

vue inspect plugins f. devServer vue.config.js 还提供了 devServer 项用于配置 webpack-dev-server 的行为，使得我们可以对本地服务器进行相应配置，我们在命令行中运行的 npm serve 对应的命令 vue-cli-service serve 其实便是基于 webpack-dev-server 开启的一个本地服务器，其常用配置参数如下

// vue.config.js module.exports = { …

devServer: {
    open: true, // 是否自动打开浏览器页面
    host: \'0.0.0.0\', // 指定使用一个 host。默认是 localhost
    port: 8080, // 端口地址
    https: false, // 使用https提供服务
    proxy: null, // string | Object 代理设置
    
    // 提供在服务器内部的其他中间件之前执行自定义中间件的能力
    before: app => {
      // `app` 是一个 express 实例
    }
}

...

}

快速配置多环境变量

vue-cli3 搭建的项目其实看起来比 cli2 简单明了很多，官方也有相关文档对多环境变量配置的描述。https://cli.vuejs.org/zh/guide/mode-and-env.html

1.首先：通过为 .env 文件增加后缀来设置某个模式下特有的环境变量通过传递 –mode 选项参数为命令行覆写默认的模式

在项目的根目录新建3个文件夹，分别对应开发（dev），测试（test），生产（prod）文件命名： .env.dev , .env.test , .env.prod

Image text

接下来是不同文件里面的代码情况，

.env.dev

NODE_ENV = \’development\’ VUE_APP_CURRENTMODE = \’dev\’ VUE_APP_BASEURL = \’本地开发api地址\’

.env.test

NODE_ENV = \’production\’ VUE_APP_CURRENTMODE = \’test\’ VUE_APP_BASEURL = \’测试环境api地址\’

.env.prod

1.NODE_ENV = \’production\’ VUE_APP_CURRENTMODE = \’prod\’ VUE_APP_BASEURL = \’正式环境api地址\’

2.修改package.json 脚本：

3.最后总结： npm run dev //本地运行 npm run build:test //测试环境打包 npm run build:pro //正式环境打包

一段时间果不其然又开始搞了，遇到的问题自己记录一下

1. ERR! errno 126 解决办法

rm -rf node_modules
rm package-lock.json
npm cache clear –force
npm insta

2. Unexpected end of JSON input while parsing near \’…”报错解决方法，加载依赖包加载不了。或者加载速度太慢，依次运行这三个命令

（1）npm install –registry=https://registry.npm.taobao.org –loglevel=silly
（2）npm cache clean –force
（3）npm install

3. 报错内容：

Error – [sass] Error: Missing binding C:\Users\chuanbiao.liu\helloworld-webpart\node_modules\node-sass\vendor\win32-x64-57\binding.node
Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 8.x

Found bindings for the following environments:
– Windows 64-bit with Node.js 8.x

This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass –force` to build the binding for your current environment.
[16:48:42] Error – \’sass\’ sub task errored after 1.53 s
Missing binding C:\Users\chuanbiao.liu\helloworld-webpart\node_modules\node-sass\vendor\win32-x64-57\binding.node
Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 8.x

Found bindings for the following environments:
– Windows 64-bit with Node.js 8.x

This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass –force` to build the binding for your current environment.

解决：执行npm install node-sass 后执行 npm rebuild node-sass 命令。

本文链接：https://www.cnblogs.com/hanqingyi/p/10397162.html

今年开搞了,搭建一下vue开发环境

Node.js 安装

Windows 上安装 Node.js

Linux 上安装 Node.js

wget https://nodejs.org/dist/v10.9.0/node-v10.9.0-linux-x64.tar.xz // 下载

tar xf node-v10.9.0-linux-x64.tar.xz // 解压

cd node-v10.9.0-linux-x64/ // 进入解压目录

./bin/node -v // 执行node命令查看版本

Ubuntu 源码安装 Node.js

Ubuntu apt-get命令安装

set for nodejs

Vue.js 安装

最新稳定版

全局安装 vue-cli

创建一个基于 webpack 模板的新项目

这里需要进行一些配置，默认回车即可

安装最新版的vue-cli

检查vue-cli版本

运行 vue ui

Vue CLI 3 项目构建基础配置

查看 node 版本

查看 npm 版本

脚手架vue-cli

安装 Vue CLI 3.x

my-project 是你的项目名称

可视化界面

webpack 在 CLI 3 中的应用

只查看 plugins 的内容

快速配置多环境变量

.env.dev

.env.test

.env.prod