Vue环境搭建(vue-cli3创建项目)

一、安装node.js(https://nodejs.org/en/)

    注意:推荐使用 node-v8.11.0-x64,具体安装步骤下一步即可

二、设置nodejs prefix(全局)和cache(缓存)路径

    1、在nodejs安装路径下,新建node_global和node_cache两个文件夹
image.png
    2、设置缓存文件夹和全局模块存放路径
          npm config set cache "D:\application\nodejs\node_cache"
          npm config set prefix "D:\application\nodejs\node_global"

三、基于 Node.js 安装cnpm(淘宝镜像)以及升级npm至最新版本

    1、npm install -g npm                                                                        --- 升级npm到最新版本
    2、npm install -g cnpm --registry=https://registry.npm.taobao.org    --- 安装cnpm(淘宝镜像)

四、设置环境变量(非常重要)

    1、鼠标右键"此电脑",选择“属性”菜单,在弹出的“系统”对话框中左侧选择“高级系统设置”,弹出“系统属性”对话框。
    2、修改系统变量PATH
image.png
   3、新增系统变量NODE_PATH
image.png

五、安装vue命令行工具,即vue-cli3 脚手架

  1、vue-cli3 访问地址: [https://cli.vuejs.org/guide/installation.html](https://cli.vuejs.org/guide/installation.html)
  2、安装命令: npm install -g @vue/cli  # OR  yarn global add @vue/cli
  3、注意:如果事先安装 vue-cli 则可以使用 npm uninstall vue-cli -g 卸载
        a:vue-cli     对应的版本(2.x..) 
        b:@vue/cli 对应的版本(3.x..) 
  4、输入vue --version 查看版本即可

六、采用vue-cli3 脚手架创建Vue项目

  1、运行 vue ui
image.png
  2、省略(界面是中文界面,按照流程下一步操作即可)
  3、目录结构简易描述
image.png

七、运行Vue项目

  1、运行  npm run serve 指令即可
image.png

八、细节注意事项

  - 注意在安装vue-cli3 并查看版本的时候不是3.x版本而是2.x(2.9.6等)
  - 解决办法:在安装Node.js的时候使用 【推荐版本即可 = node-v8.11.0】

你可能感兴趣的:(Vue环境搭建(vue-cli3创建项目))