vue.js项目构建

 

这里构建的vue.js项目依赖node服务器运行。

项目搭建完整步骤：

1. 安装node.js ，转至nodeJs网站http://nodejs.cn/ 下载nodeJs进行安装。
   1. 安装完毕检查nodeJs安装是否成功？
      

   2. nodeJs安装完成，自带npm，可以检查npm是否已经安装 
      

2. 安装webpack。

   1. webpack是一个模块加载器兼打包工具，在vue项目中，为了更好的管理代码使用模块系统，使用webpack打包。
   2. 安装webpack 
      
   3. 查看webpack是否安装成功？
      

3. 安装 vue-cli 脚手架工具 

   1. vue-cli是vue的脚手架工具，用于自动生成vue.js的模板工程
   2.  安装vue-cli 
       
   3. 查看vue-cli是否安装成功?
      

4. 使用webpack+vue-cli 初始化项目

   1. 使用vue-cli+webpack构建项目
      
      然后会有提示，将会安装vue2.0版本，如需安装1.0输入“vue init webpack#1.0 proName”.
        

   2. 项目初始化之后的目录结构
      此时，项目只有一个架子，这个时候操作“npm run dev”会报错。
      需要先安装项目依赖↓
      

5. 安装项目依赖
   1. 项目依赖都写在package.json文件中
      dependencies中的依赖表示运行依赖
      devDependencies中的依赖表示开发依赖
      
   2. 下载依赖的方法
      npm i   则会默认下载所有依赖
      npm i --production   安装所有运行依赖
      npm i packagename  只安装点名依赖
      安装好所有依赖之后项目中会自动创建一个文件夹
      

       

6. 运行项目
   1. 全部安装成功之后，运行
         
   2. 然后你会看到项目版本号以及项目目录，监听地址等信息
      
   3. 浏览器访问，你会看到访问成功！
      
      

       

      
      
      
   4. 项目前期搭建至此结束.