搭建vue开发环境。

 

选择对应版本,https://nodejs.org/en/download/ <https://nodejs.org/en/download/>

 



安装过程:下一步 路径:(我的D:\Develop\nodejs)下一步就好



安装好之后,对npm安装的全局模块所在路径以及缓存所在路径,进行环境配置。是因为以后在执行类似:npm install express
[-g](后面的可选参数-g,g代表global全局安装的意思)的安装语句时,会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中,占C盘空间。

例如:我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中,则在我安装的文件夹【D:\Develop\nodejs】下创建两个文件夹【node_global】及【node_cache】
打开cmd输入如下命令
npm config set prefix "D:\Develop\nodejs\node_global" npm config set cache
"D:\Develop\nodejs\node_cache"


接下来点击 我的电脑,属性,高级系统设置





1.新建系统变量
输入NODE_PATH 输入D:\Develop\nodejs;D:\Develop\nodejs\node_global\node_modules
(node安装地址跟自定义地址 用;分开)
2.修改用户变量path
%NODE_PATH%;D:\Develop\nodejs\node_global (加%NODE_PATH%是为了防止 cmd找不到node报错)
然后保存,对....

 

3、基于nodejs,利用淘宝npm镜像安装相关依赖。

由于国内使用npm会很慢,这里推荐使用淘宝nmp镜像 打开cmd

npm install -g cnpm --registry=https://registry.npm.taobao.org
<https://registry.npm.taobao.org/>



 

完成之后,我们就可以使用cnpm代替npm来安装依赖包了。

到这里测试下node  cnpm有没有问题:  node -v   cnpm -v



ps:解决cnpm不是外部命令:

之前安装npm的时候,配置过node_modules和node_cache。所以去nodejs的目录下去找cnpm装哪个文件夹去了。

我的是D:\software\nodeJS\node_cache



本文件夹下打开cmd 运行cnpm -v



ok,现在去配置系统环境path,把cnpm安装路径加入path里,如下图。



ok到这里问题就解决了,可以直接win+r打开cmd 跑下cnpm -v ,楼主是没有问题的。

4、为什么安装vue-cli脚手架---为了生成vue工程模板

 

安装全局vue-cli脚手架,用于帮助搭建所需要的模板框架 输入 cnpm install -g vue-cli

 



安装完成之后
输入vue测试一下



出现了vue信息说明表示成功
用vue-cli构建项目

查看vue版本vue -V   这个V是大写的 不让会报错

5.打包工具webpack   中文网址:https://www.webpackjs.com/  最近也在研究这东西  感觉逼格很高

6.创建项目

(1)本地创建目录

 



(2)cmd 打开本地,目录E盘下www里的fristvue    注:正确的命令格式是:cd/d E:\www\firstvue



下面这张图是默认地址的截图:


? Project name one 一般直接回车 ? Project description A Vue.js project 项目说明 ? Author
wxj 开发者 ? Vue build standalone 默认回车 ? Install vue-router? Yes 个人建议Y ? Use
ESLint to lint your code? No 是否启用eslint检测规则,个人建议不使用 ? Set up unit tests No
是否创建单元测试 ? Setup e2e tests with Nightwatch? No ? Should we run `npm install`
for you after the project has been created? (recommended) npm
7、项目建立完成后,目录结构如下:



8、安装项目所需依赖,进入项目中:

? <http://www.jb51.net/article/113890.htm#>


1

npm install

完成后,会发现项目目录下多出一个node_modules文件夹,里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目。



9、进入项目目录文件夹(my-project)中,就可以使用vue进行开发啦

10、使用npm run dev,便可以打开本地服务器实时查看效果(localhost:8080)

如果浏览器打开之后,没有加载出页面,有可能是本地的 8080 端口被占用,需要修改一下配置文件 config>index.js

<http://files.jb51.net/file_images/article/201705/2017051714072416.png>

建议将端口号改为不常用的端口。另外我还将 build 的路径前缀修改为 ' ./ '(原本为 ' / '),是因为打包之后,外部引入 js 和 css
文件时,如果路径以 ' / ' 开头,在本地是无法找到对应文件的(服务器上没问题)。所以如果需要在本地打开打包后的文件,就得修改文件路径。

11、初始效果

<http://files.jb51.net/file_images/article/201705/2017051714072517.png>

12,退出监听,可以直接Ctrl+C,选择Y。

参考:https://www.cnblogs.com/guoyinglichong/p/8278467.html 
  http://www.jb51.net/article/113890.htm