vue项目搭建记录

node安装 直接去官网下载即可 https://nodejs.org/en/download/ 安装完成后输入node -v 查看是否安装成功

下面所安装的东西如果是Mac系统，有些是因为权限的原因需要在前面加上 sudo，回车后输入密码即可

安装Vue CLI脚手架 npm install -g @vue/cli mac版请用 sudo npm install -g @vue/cli 回车输入密码即可（这里做个mac系统的安装实例，之后就不提了） 安装完成后可输入 vue --version 查看是否安装成功 这里有vue的官网 https://cli.vuejs.org/zh/guide/installation.html，里面有关于旧版本和版本升级的说明

创建vue项目 这里简单分为两种 一种官方安装 vue create 项目名称，如 vue create hello-world，官网链接 https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create 默认选项一 default (babel, eslint) 提供 babel 和 eslint 支持。 Babel：主要用于将 ECMAScript 2015+ 版本的代码转换向后兼容，为的是在其他环境中正常运行， Babel官网 https://www.babeljs.cn/docs/ eslint：代码规范检测 选项二需要手动设置，它们是面向生产的项目更加需要的 一般常用的几个： Babel、Router、Vuex、CSS Pre-processors Babel：上面已经介绍过了，这里就不提了 Router：vue-router（vue路由） Vuex：vuex（vue的状态管理模式） CSS Pre-processors： CSS 预处理器（如：less、sass、Stylus） 下一步细节配置详情看这里 项目选项详解原文：https://blog.csdn.net/HW0007/article/details/104990948 创建成功后，cd 项目名 进入项目，npm run serve 启动项目，一个简单的项目就创建成功了 另一种 创建一个基于webpack 的vue项目 全局安装一个桥接工具：npm install -g @vue/cli-init 创建项目：vue init webpack my-project 需要注意的是项目的名称不能包含大写，不然会报错。 Project name (my-project) 项目名称 Project description (A Vue.js project) 项目描述 Author 作者 Install vue-router? (Y/n) 是否安装vue-router路由 Use ESLint to lint your code? (Y/n) 是否使用ESLint整理代码 Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设（使用箭头键） Setup unit tests with Karma + Mocha? (Y/n) 使用Karma + Mocha进行设置单元测试 Setup e2e tests with Nightwatch? (Y/n) 使用Nightwatch设置e2e测试 一般我都只填前三个（其实回车就好了，哈哈），其它的都没选，个人比较喜欢自己从头到尾按自己的风格搭建项目，可以有效的帮助自己了解项目的搭建流程、加深印象 安装成功后 npm run dev运行项目，如有报错可能是项目依赖的问题 npm install 一下就好

这里说一下安装其它插件以及在安装的时候遇到的问题 1、sass 安装 （Mac系统记得加 sudo） npm install --save-dev sass-loader

sass-loader依赖于node-sass,所以要安装node-sass

npm install --save-dev node-sass 安装成功后 在build文件夹下的webpack.base.conf.js的rules里面添加配置

{ test: /\.scss$/, loaders: ['style', 'css', 'sass'] }

然后在vue文件的style标签里加上 lang=“scss” 就可以了

<style lang="scss"> </style>

没想到就在这个时候一保存就报错，原因是版本太高了 解决办法是：package.json文件里把sass-loader改为7.3.1版本，“sass-loader”: “^7.3.1”

2、axios 安装 Axios 是一个基于 promise 的 HTTP 库，axios官网 http://www.axios-js.com/zh-cn/docs/ npm install axios

3、vue-router 安装 npm install vue-router

import VueRouter from 'vue-router' Vue.use(VueRouter)

4、Vuex 安装 npm install vuex --save

import Vuex from 'vuex' Vue.use(Vuex)