1、需要先安装nodejs 和vue-cli
这里使用的vue-cli是4.3.1
vue -V
@vue/cli 4.3.1
2、使用vue-cli创建一个工程
在命令行中输入初始化项目的命令,做了一些选择:
vue create my_project
babel是一般都需要的,eslint(语法检查和样式检查)还是有用的
选择default babel + eslint然后就是一顿的install,ok了之后
进入目录之后,跑下面的命令,再访问http://localhost:8080/
cd my_project
npm run serve
如果想自己手动选择一些配置项,就选择"Manually select features":
Vue CLI v4.3.1
? Please pick a preset:
default (babel, eslint)
> Manually select features
选择了这些
Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project:
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
>(*) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
后面的这样选择的
css预处理器——选择的是dart-sass
lint——用的Prettier,选择的是在保存的时候就lint,早点发现问题好一点
Babel, ESLint的配置文件——选择的是各自有各自的配置文件,不用都放到package.json里面
Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) N
然后就是一顿安装。。。。。。,命令行下面执行,访问https://localhost:20000/
cd my_project
npm run serve
3、vue工程文件的基本说明
生成的目录情况public: html模板index.html还有favicon.ico
src: 是源代码目录
assets——静态资源比如字体,图片等 ,
components——全局公用组件,
router——路由,
store——全局 store管理,
views——所有页面,
main.js—— 入口文件 加载组件 初始化等,
app.vue——入口页面,
node_modules: 那些需要的package,
.browserslistrc:一个单独的文件,指定了目的目标浏览器的范围
.eslintrc.js:eslint 配置项
babel.config.js:babel的配置文件
package.json:这个项目模块的描述文件
4、配置文件的修改和增加
4.1、增加环境的配置文件
一般分为dev、int、production环境,各个环境有各自的一些环境变量之类的,
各个环境的配置文件
下面这个是.env.dev的,不同环境的api或者env名字不一样
ENV = 'dev'
VUE_APP_BASE_API = '/devapi'
VUE_CLI_BABEL_TRANSPILE_MODULES = true
port = 6000
在代码里面就可以这样使用判断当前是什么环境
if (process.env.NODE_ENV !== 'dev') {
window.console.log =function(){};
}
4.2 修改package.json
增加dev名,还有各个环境的build命令,现在跑dev环境的命令就是npm run dev了
"scripts": {
"dev": "vue-cli-service serve --mode dev",
"build:prod": "vue-cli-service build --mode production",
"build:int": "vue-cli-service build --mode int",
"build:dev": "vue-cli-service build --mode dev",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
4.3 增加vue.config.js
默认是没有vue.config.js,在package.json同级增加一个vue.config.js文件。
配置参考这里https://cli.vuejs.org/zh/config/
5、添加需要的基本的库了
element-ui,axios,moment等等需要的库
npm install --save xxx
网友评论