WebStorm 零起点搭建Vuejs项目 - 全程篇

一、步骤讲解

1. 安装node.js （同时npm会跟随nodejs自动化安装）

2. npm安装（这里默认上一步已经共同安装OK）

3. npm 转 cnpm 安装（使用淘宝镜像）

   如下图所示: 这一步容易报错npm WARN版本问题：npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at leas t 2.1.6 to avoid a ······
   .
   解决办法： npm降配

   具体操作： cmd命令分别执行如下指令

     	npm install npm@4.6.1 -g
     	npm update -d
   
       
   
       
   1
   2

   代码运行成功之后，截图如下：
   

4. 上述报错解决之后，CMD再重新操作npm淘宝cnpm镜像，指令如下：
   npm install -g cnpm --registry=https://registry.npm.taobao.org

   验证安装成功？ 方法如下，CMD指令：cnpm -v
   

5. 安装 webpack（CMD指令如下）
   npm webpack -g

   cmd截图如下：

验证安装成功？ 方法如下，CMD指令：webpack -v

6. 全局安装 vue-cli（CMD指令如下）
   cnpm install vue-cli -g

   cmd截图如下：

验证安装成功？ 方法如下，CMD指令：vue -V 【-v字母V必须大写】

7. 安装软件： Git

8. 安装软件： WebStorm，

   设置软件使用权限，汉化等等（永久[查看方法]）

9. 修改相关配置，为下一步新建vue.js项目做最后的准备。

   打开WebStorm软件，更改配置参数：圈中的复选框（设置为非选中状态，如下图所示）
   

10. 新建vue项目 ，选择左侧边栏靠近底部的vue.js，默认路径不需要修改，只需要设置你的项目文件夹路径即可，enter回车

    之后进行项目命名、描述、作者等等的相关配置
    如：my53 ， 截图略
    .

11. 执行 Ctrl + E 或者 鼠标悬停package.json+单击右键并选择Show npm Scripts，然后 双击 选择 dev运行，演示项目

截图示下：

---

二、 浏览器演示效果：

创建 vue 项目
npm install -g vue-cli
vue init webpack vue_demo
cd vue_demo
npm install
npm run dev
访问: http://localhost:8080/
 模板项目的结构
|-- build : webpack 相关的配置文件夹(基本不需要修改)
|-- dev-server.js : 通过 express 启动后台服务器
|-- config: webpack 相关的配置文件夹(基本不需要修改)
|-- index.js: 指定的后台服务的端口号和静态资源文件夹
|-- node_modules
|-- src : 源码文件夹
|-- components: vue 组件及其相关资源文件夹
|-- App.vue: 应用根主组件
|-- main.js: 应用入口 js
|-- static: 静态资源文件夹
|-- .babelrc: babel 的配置文件
|-- .eslintignore: eslint 检查忽略的配置
|-- .eslintrc.js: eslint 检查的配置
|-- .gitignore: git 版本管制忽略的配置
|-- index.html: 主页面文件
|-- package.json: 应用包配置文件
|-- README.md: 应用描述说明的 readme 文件