vue项目搭建

原文出处：https://www.cnblogs.com/hellman/p/10985377.html

一.安装node.js环境：

1.下载地址为：https://nodejs.org/en/；

2.检查是否安装成功：   node --version

3.配置淘宝镜像：npm install -g cnpm –registry=https://registry.npm.taobao.org

二、搭建vue项目环境

1.全局安装 vue-cli： cnpm install --global vue-cli

2.进入项目目录，创建一个基于webpack的项目模板： vue init webpack 项目名

例如：workspace 文件下执行 vue init webpack travel-app，则在workspace目录下 chuangjian创建一个travel-app项目目录，并且完成初始化；

配置项：

vue build =>打包方式  直接回车

install vue-router => 是否安装vue-router

Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；

Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；

Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；

3.进入项目，安装依赖：

cd travel-app

cnpm i

4.启动项目：

npm run dev

三、vue项目 目录说明：

1.build     --------------构建脚本目录

1. 1. build.js  ---------------------------------  生产环境构建脚本；
   2. check-version.js-----------------------  检测npm、node.js版本；
   3. utils.js------------------------------------  构建相关工具方法；
   4. vue-loader-conf.js--------------------- 配置css加载器，以及编译css之后自动添加前缀；
   5. webpack-base-conf.js---------------- webpack基本配置；
   6. webpack-dev-conf-js------------------ webpack开发环境配置；
   7. webpack-prod-conf.js ---------------- webpack生产环境配置；

2.config     ----------------------- 项目配置

1. 1. dev-env.js ----------------------------------------- 开发环境变量；
   2. index.js --------------------------------------------- 项目配置文件；
   3. pro-env.js -----------------------------------------  生产环境变量；

3.node_modules： npm加载的项目依赖模块；

4.src   ----------------------------- 开发人员工作目录，要做的事情都在这个目录里；

1. 1. assets -------------------------------- 公共资源，放置公共css、公共js；这里的资源会被webpack构建；
   2. components ------------------------ 组件目录；
   3. router    ------------------------------ 路由；路由配置在 index.js中；
   4. App.vue ----------------------------- 根组件；
   5. main.js ------------------------------- 入口文件

5、static：静态资源目录，如图片、字体等。不会被webpack构建

6、index.html：首页入口文件，可以添加一些 meta 信息等

7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息


8、README.md：项目的说明文档，markdown 格式

9、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等

四、单页面应用项目搭建

工作目录“src”：

components文件下新建页面

router/index.js 配置路由

如果项目中使用less编辑css：npm install less less-loader --save

<style lang="less" scoped></style>

问题：

npm run dev 运行项目成功，但是浏览器没有自动打开;

config/index.js-------module.export 中 autoOpenBrowser：true

端口冲突：

config/index.js-------module.export 中 修改 port参数的值