使用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\vue_project

5、使用脚手架创建项目

vue init webpack vue-20220906

? Project name vue-20220906

? Project description A Vue.js project

? Author ** <850***54@qq.com>

? 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-20220906

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 less@3.9.0 --save-dev 

2)npm install less-loader@4.1.0 --save-dev

3)在页面中使用

<style scoped lang="less">

.hello {

h1 {

color: red;

}

}

</style>