使用vue-cli脚手架创建项目

1、基于webpack创建项目的方式，是vue脚手架2系列

2、安装webpack

npm install webpack webpack-cli -g

webpack -v(小写)

3、安装vue-cli

npm install vue-cli -g

vue -V(大写的)

4、使用终端切换到工作空间目录

C:\Users\root>cd /d F:\web_workspace\web20

5、使用脚手架创建项目

vue init webpack vue-20210226

? Project name vue-20210226

? Project description A Vue.js project

? Author ** <952***[email protected]>

? Vue build standalone

? Install vue-router? Yes

? Use ESLint to lint your code? Yes

? Pick an ESLint preset Standard

? Set up unit tests No

? Setup e2e tests with Nightwatch? No

? Should we run `npm install` for you after the project has been created? (recommended) npm

6、启动项目

cd vue-20210226

npm run dev

7、访问项目

在浏览中访问：http://localhost:8080

1) 修改ip和port

在config/index.js中

dev: {

host: '192.168.102.35', 

port: 80,

}

8、项目打包

1) 修改build/webpack.prod.conf.js中

minify: {

//保留双引号

removeAttributeQuotes: false

},

2) 修改config/index.js中

找到 build { assetsPublicPath: '/' }，将其设置为：assetsPublicPath: './ ' 即可。

3) 运行npm run build 命令

4) 项目多了dist编译后的静态资源目录

index.html可以打开或部署服务器

9、项目添加less的支持(版本一定不能高，其它的不要配置)

1)npm install [email protected] --save-dev 

2)npm install [email protected] --save-dev

3)在页面中使用