Vue搭建及目录结构

Vue搭建及目录结构

1.vue环境搭建

• node.js

  vue运行依赖于node的npm的管理工具，官网下载

  地址：http://nodejs.cn/download

• 配置node环境变量

  将nodejs安装目录放到全局环境变量中

  ps:（可选）

  1. 在安装目录下新建两个文件夹node_global & node_cache

  2. npm config set prefix 新建node_global路径

  3. npm config set cache 新建node_cache路径

  4. 将node_global中的node_modules也添加环境变量

  5. NPM镜像源设置

     npm config set registry https://registry.npm.taobao.org

     

• 安装cnpm

  使用淘宝镜像安装cnpm

  $ npm install -g cnpm --registry=https://registry.npm.taobao.org

• 安装vue-cli脚手架

  cnpm isntall --global vue-cli

2.vue-cli初始化项目

• 初始化项目

  vue init webpack project_name

• 安装依赖

  在项目目录下运行 cnpm install

3.vue项目目录结构

• node_modules文件夹：

  项目依赖文件夹

• public文件夹：

  防止静态资源，在public中的静态资源在webpack进行打包的时候会原封不动的打包进dist文件夹

• src文件夹：

  程序源代码文件夹

  • assets文件夹：

    放置多组件共用的静态资源，在assets文件中的静态资源在webpack打包的时候会把静态资源当作一个模块，打包js文件里面

  • components文件夹

    放置非路由组件（全局组件）

• App.vue根组件

  唯一根组件，Vue当中的组件

• main.js

  程序入口文件，也是整个程序中最先执行的文件\

npm环境搭建

vue开发环境搭建