vue创建项目和常见问题

安装方法

方法一

1. npm install -g @vue/cli
2. vue ui

方法二

 vue create 项目名称

参考链接

vue组件汇总

安装依赖

cnpm install element-ui -S

npm install normalize.css

npm install webpack webpack-cli -D

npm run lint -- --fix

vue3实现分环境打包

在vue-cli3的项目中，

npm run serve时会把process.env.NODE_ENV设置为‘development’；

npm run build 时会把process.env.NODE_ENV设置为‘production’；

此时只要根据process.env.NODE_ENV设置不同请求url就可以很简单的区分出本地和线上环境。

==打包时线上环境可能分多种怎么区分不同的线上环境呢==

参考链接

Element Ui 引入报错

error  in ./node_modules/_element-ui@2.12.0@element-ui/lib/theme-chalk/index.css

Module build failed: Error: No PostCSS Config found in: /Users/jifangli/Documents/work/webapp-teacher1/node_modules/_element-ui@2.12.0@element-ui/lib/theme-chalk
    at config.search.then (/Users/jifangli/Documents/work/webapp-teacher1/node_modules/_postcss-load-config@2.1.0@postcss-load-config/src/index.js:91:15)

 @ ./node_modules/_element-ui@2.12.0@element-ui/lib/theme-chalk/index.css 4:14-166 13:3-17:5 14:22-174
 @ ./src/main.js
 @ multi ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

解决：

• 在项目的根目录下放一个 postcss.config.js 内容module.exports = {};

* ./fonts/element-icons.woff in ./node_modules/_css-loader@0.28.11@css-loader??ref--7-1!./node_modules/_postcss-loader@2.1.6@postcss-loader/lib??ref--7-2!./node_modu
les/_element-ui@2.12.0@element-ui/lib/theme-chalk/index.css
* ./fonts/element-icons.ttf in ./node_modules/_css-loader@0.28.11@css-loader??ref--7-1!./node_modules/_postcss-loader@2.1.6@postcss-loader/lib??ref--7-2!./node_modul
es/_element-ui@2.12.0@element-ui/lib/theme-chalk/index.css

解决方法

在webpack.base.conf.js module->rules配置

{
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    loader: 'file-loader'
}