一、安装node
- 请在官网下载安装：https://nodejs.org/zh-cn/
- vscode 中 点击 ( ctrl + `) 调出终端
- 输入指令
node -v，能显示版本号，说明 node 已经装好了 - 输入指令
npm -v，能显示版本号，说明 npm 可以使用了
点击链接查看图文教程
https://blog.csdn.net/_/article/details/
二、配置淘宝镜像
- 输入指令：
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 静态文件
.gitignoregit的忽略文件babel.config.js设置 babel 的配置的package.json所有依赖包配置文件README.md项目文档
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/207318.html原文链接：https://javaforall.net
