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>