Vue vscode 创建 vue 项目流程【超详细】

一、安装node

1. 请在官网下载安装：https://nodejs.org/zh-cn/
2. vscode 中 点击 ( ctrl + `) 调出终端
3. 输入指令node -v，能显示版本号，说明 node 已经装好了
4. 输入指令npm -v，能显示版本号，说明 npm 可以使用了

点击链接查看图文教程
https://blog.youkuaiyun.com/qq_45677671/article/details/114535955

二、配置淘宝镜像

• 输入指令：
• npm install -g cnpm --registry=https://registry.npm.taobao.org
• 输入指令cnpm -v，能显示版本号，说明 cnpm 已经装好了

三、配置 vscode（win10）

win7 无需配置

1. 右击VSCode图标，选择属性，选择兼容性，勾选以管理员身份运行此程序，最后点击确定
   
2. vscode 中 点击 ctrl + ` 调出终端
3. 输入命令：get-ExecutionPolicy
4. 输入命令：set-ExecutionPolicy RemoteSigned
5. 输入命令：get-ExecutionPolicy

• Restricted：表示禁止终端使用命令的
• RemoteSigned：表示可以使用终端命令了
  

四、全局安装脚手架

• 在终端输入命令：cnpm i -g @vue/cli 或npm i -g @vue/cli

五、创建项目

• 先创建一个放置项目的文件夹www
• 在终端中使用cd指令跳转到这个文件夹
• 创建项目指令：vue create ds-shop（ds-shop是项目名，可以自己取）

配置项目流程：

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

---

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

• history：利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法（需要特定浏览器支持）
• hash： 浏览器url址栏 中的 # 符号（如这个 URL：http://www.abcd.com/#/hello，hash 的值为“ #/hello”），hash 不被包括在 HTTP 请求中（对后端完全没有影响），因此改变 hash 不会重新加载页面。更容易进行打包上传服务器

5. 选择使用那种css预处理器，这里选择的是 第二种 scss with node-sass

6. 选择编码规则，建议初学者选择第一项，表示只有报错时才会验证

1. ESLint with error prevention only
只配置使用 ESLint 官网的推荐规则

2. ESLint + Airbnb config
官网推荐的规则 + Airbnb 第三方的配置

3. ESLint + Standard config
使用 ESLint 官网推荐的规则 + Standard
第三方的配置

4. ESLint + Prettier
使用 ESLint 官网推荐的规则 + Prettier 第三方的配置

7. 何时检测？这里选的是每次保存时验证Lint on save

• Lint on save： 保存就检测

• Lint and fix on commit：fix和commit时候检查

8. 如何存放配置 ？这里使用 package.json

• In dedicated config files ：独立文件放置
• In package.json：放package.json里

9. 是否保存本次配置（之后可以直接使用），这里选的是保存y

10.保持本次配置的信息并命名（随便取），下次就可以直接使用本次配置，无需从新手动配置

11. 配置完成

六、进入项目

• 指令：cd ds-shop（进入项目文件夹）
• 指令：npm run serve（启动项目 ）
• 执行完之后 ，显示 Compiled successfully in ***，表示运行成功
  
  App running at:
  • Local: http://localhost:8080/
  • Network: http://10.36.136.251:8080/
• 打开浏览器，输入Local地址（http://localhost:8080/）
• 就能访问你刚创建的项目了
  

七、项目结构

• 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 项目文档