创建前安装环境

ctrl+j弹出终端

window需要管理员运行并且授权

node -v # 显示版本号，说明 node 已经装好
npm -v # 显示版本号，说明 npm 可以使用
# 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v # 显示版本号，说明 cnpm 已经装好

我的mac版本，中间报了错，执行命令才安装好：

全局安装脚手架

cnpm i -g @vue/cli 或 npm i -g @vue/cli
我的没有权限，使用sudo管理员身份执行的

创建项目

我是创建了一个文件夹：/Users/fanzhe/VueProjects

cd /Users/fanzhe/VueProjects
# 创建项目
vue create vue-demo

配置项目流程：

上下箭头键：表示选择；回车键：表示确认

1、选择Manually select features，表示手动配置
2、选择需要安装的插件，一般选如下勾选项（按空格键选择）

• Choose Vue version：选择Vue版本
• Babel：解析 es6 转 es5 的插件
• TypeScript：TypeScript插件
• Progressive Web App (PWA) Support：渐进式Web应用程序（PWA）支持
• Router：vue路由插件
• Vuex：Vuex插件
• CSS Pre-processors：css预处理插件
• Linter/Formatter：格式化程序
• Unit Testing：单元测试
• E2E Testing：端到端（end-to-end）
  

3、选择 vue 版本
4、选择路由模式 是否为 history模式，y表示是，N表示使用hash模式，这里选择的是N
5、选择使用那种css预处理器，这里选择的是 第二种 scss with node-sass
6、选择编码规则，建议初学者选择第一项，表示只有报错时才会验证
7、 何时检测？这里选的是每次保存时验证Lint on save
8、如何存放配置 ？这里使用 package.json
9、是否保存本次配置（之后可以直接使用），这里选的是保存y
10、保持本次配置的信息并命名（随便取），下次就可以直接使用本次配置，无需从新手动配置
11、 配置完成
12、npm run serve 启动项目

项目结构

• node_modules 所有依赖项
• public 静态内容
  • favicon.ico 小图标
  • index.html
• src 项目执行的主目录
  • assets 静态文件
    • 图片 、
    • json、
    • iconfont、
  • components 组件
  • router 路由配置文件
  • views 放置页面内容
  • App.vue 项目的根组件，文件中可以写路由出口和路由链接 ，在 main.js里引入
  • main.js 项目的主入口文件
• .gitignore git的忽略文件
• babel.config.js 设置 babel 的配置的
• package.json 所有依赖包配置文件
• README.md 项目文档