一、安装node
- 请在官网下载安装:https://nodejs.org/zh-cn/
- vscode 中 点击 ( ctrl + `) 调出终端
- 输入指令
node -v
,能显示版本号,说明 node 已经装好了 - 输入指令
npm -v
,能显示版本号,说明 npm 可以使用了
点击链接查看图文教程
https://blog.csdn.net/qq_45677671/article/details/114535955
二、配置淘宝镜像
- 输入指令:
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 输入指令
cnpm -v
,能显示版本号,说明 cnpm 已经装好了
三、配置 vscode(win10)
win7 无需配置
- 右击VSCode图标,选择
属性
,选择兼容性
,勾选以管理员身份运行此程序
,最后点击确定
- vscode 中 点击 ctrl + ` 调出终端
- 输入命令:
get-ExecutionPolicy
- 输入命令:
set-ExecutionPolicy RemoteSigned
- 输入命令:
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
项目的主入口文件
- assets 静态文件
.gitignore
git的忽略文件babel.config.js
设置 babel 的配置的package.json
所有依赖包配置文件README.md
项目文档