vue环境搭建及项目构建

版权声明：本文为博主原创文章，欢迎转载，转载请注明作者、原文超链接。 https://blog.csdn.net/axing2015/article/details/86687267

最近要开发一个新的项目，使用到了vue做前端框架，这是第一次接触vue，所以在此做一下环境搭建过程的记录，以便以后使用查询

一、验证是否安装node.js

1. 按下Ctrl+R输入cmd回车，打开命令提示符控制台
2. 在打开的窗口中输入node 回车，在输入function testNode() {return "node is workig"}; testNode();回车，看到绿色的 结果，即安装了node.js
   
3. 或查看node.js版本，使用node -v命令
   

二、安装node.js

1. 进入Node.js官网：https://nodejs.org/en/ 选择下载并安装Node.js。（下载Current当前版本）
2. 验证安装成功，使用一、3.
3. npm包管理器集成在node.js中了，可以使用npm -v命令验证
   
4. 更新npm至最新版本，使用npm -g install npm命令
   

三、安装 cnpm

• 执行命令 npm install -g cnpm --registry=https://registry.npm.taobao.org ，使用npm的国内镜像（npm 国内镜像 https://npm.taobao.org/）cnpm 命令代替默认的npm命令，因为cnpm安装插件是从国外服务器下载，受网络影响大，可能出现异常，因此这里使用淘宝提供的即可，这是一个完整npmjs.org镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步
  

四、使用cnpm安装脚手架vue-cli

• vue-cli 是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，分为vue init webpack-simple 项目名 和vue init webpack 项目名 两种
• 在命令行中运行命令 cnpm install -g vue-cli 安装脚手架
  

五、构建项目

• 在本地创建一个目录，cd 进去，执行vue init webpack demo1-vue命令，自动生成vue项目，下面是提示选择

  ? Project name demo1-vue
  ? Project description A Vue.js project
  ? Author jinsx
  ? Vue build standalone --使用运行时和编译时
  ? Install vue-router? Yes
  ? Use ESLint to lint your code? No
  ? 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
  

  

六、安装项目依赖

• 上面脚手架自动生成的vue项目不能直接运行，需要加载上项目需要的依赖包才能运行。通过cd进到项目所在目录，然后输入命令 cnpm install 安装项目所需的依赖包资源，如果报错可以先执行cnpm rebuild node-sass在执行cnpm install
  

七、运行项目

• 使用cd进到项目所在目录，使用npm run dev命令运行项目
  

八、浏览项目查看效果

九、前端开发工具推荐

• https://code.visualstudio.com/