新建VUE项目

Sport
457 阅读2分钟

1.安装node.js

  • 官网下载，默认安装，可以自定义路径
  • cmd中输入node -v，vue -v,出现版本号则说明安装成功

2.设置global和cache路径

  • 在node.js的安装目录下，新建node_global和node_cache两个文件夹
  • 复制以上文件夹的位置（如：C:\Program Files\nodejs\node_global），在cmd中输入命令
npm config set prefix "C:\Program Files\nodejs\node_global"     设置global

npm config set cache "C:\Program Files\nodejs\node_cache"       设置cache
  • 注意：上面命令中所对应的路径一定是你新建的两个文件夹位置，不然会报错
  • 设置路径能以后通过npm安装的模块集中在“C:\Program Files\nodejs\node_global”中，便于管理和查看

3.设置环境变量

  • 点击我的电脑 -> 高级系统设置 -> 环境变量
  • 用户变量 -> 添加“C:\Program Files\nodejs\node_global”
  • 系统变量 -> 新增系统变量“NODE_PATH：C:\Program Files\nodejs\node_global\node_modules”
  • 设置环境变量可以在任意目录下使用npm、vue等命令
  • 注意：上面位置也是看node.js的安装位置来定

4.安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org
  • cmd输入cnpm -v,出现版本号说明安装成功

5.安装vue和vue-cli

  • vue-cli是vue的手脚架构建工具。可以快速的构建一个项目，提供好基本的项目结构。
cnpm install -g vue
cnpm install -g vue-cli

6.新建vue项目

  • 打开cmd，cd到新建项目的位置。如：cd D:\vue
  • 注意：不能在FAT格式的磁盘上新建项目，否则会提示错误，需要在NTFS格式下新建。
  • 输入新建项目命令
vue init webpack 项目名称      //创建一个基于webpack的vue项目

Project name ；项目名称
Project description (A Vue.js project) 项目描述 （A Vue.js project）；
Author (XXXX XXXX@XXX.com) ;XXXX@XXX.com(项目作者)；
Vue build ❯ Runtime + Compiler: recommended for most usersRuntime-only: about 6KB lighter min+gzip, but templates (or anyVue-specific HTML)are ONLY allowed in .vue files - renderfunctionsare required elsewhere
这里选择Runtime + Compiler: recommended for most users；

Install vue-router? (Y/n) 是否使用vue-router路由（y）；
Use ESLint to lint your code? (Y/n) 是否使用ESLint（n）；
Setup unit tests with Karma + Mocha? (Y/n) 是否需要单元测试（n）；
Setup e2e tests with Nightwatch? (Y/n) 是否需要单元测试(n)；
Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
  Yes, use NPM
  Yes, use Yarn
> No, I will handle that myself   //选择稍后自己安装
  • 注意：最后选择自己安装，选用cnpm，否则会自动选择npm安装，速度较慢。
  • 按照提示指令运行Vue项目cnpm run dev
  • 在游览器中打开项目运行地址
avatar
文章
阅读
粉丝