1、配置前端环境,需要安装好node与npm
(1)使用win+R,输入cmd后回车打开终端,输入指令node -v与npm -v进行查看。
如果没有安装,需要先进行安装,注意要配置环境变量。
2、安装脚手架vue cli
在终端中输入
npm install -g @vue/cli
进行全局安装,安装成功后可通过vue -V查看。
3、创建新项目
建议以管理员身份运行进入终端,进入想要创建项目的目录下。
运行以下命令创建一个新的 Vue 项目:
vue create your-project-name
注意项目名要小写,可用-或_进行连接。
可以按需选择,选择后进行回车。(如果选择默认选项 default,将会构建一个最基本的 vue 项目)
这里选择Manually select features,进行自定义配置。
( ) Choose Vue version ——选择vue脚手架的版本
( ) Babel ——转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。【推荐选择】
( ) TypeScrip—— TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了
JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行,初学者不建议选择
( ) Progressive Web App (PWA) Support—— 渐进式Web应用程序
( ) Router —— vue-router(vue路由)【推荐选择】
( ) Vuex——vuex(vue的状态管理模式)
( ) CSS Pre-processors—— CSS 预处理器(如:less、sass)
( ) Linter / Formatter—— 代码风格检查和格式化(如:ESlint)【推荐选择】
( ) Unit Testing—— 单元测试(unit tests)
( ) E2E Testing—— e2e(end to end) 测试
通过空格选定需要的,进行回车。
选择脚手架版本,进行回车。
Use history mode for router? (Requires proper server setup for index fallback in production)
是否采用history模式,默认使用,输入y
Pick a linter / formatter config: (Use arrow keys)
选择语法检查器,选第一条:仅检查最基础的语法错误
Pick additional lint features:
选择校验类型,选择第一项,每次保存都校验
Where do you prefer placing config for Babel, ESLint, etc.?
选择配置文件存放类型,选择第一项,单独存放
Save this as a preset for future projects? (y/N)
是否将当前选择的配置情况存放为模板,选择否,输入n
等待配置完成后,输入 cd study_by_work进入指定文件夹,输入npm run serve运行项目。
点击进入http://localhost:8080/,看到如下界面表示成功!