如何初始化一个vue项目
安装vue-cli脚手架工具npm i -g vue-cli查看vue是否安装成功及版本号vue -V使用vue-cli初始化项目vue init webpack project-name (vue init是vue-cli的命令,webpack是项目使用的模板模型,project-name是项目名称)之后根据自己项目所需进行enter操作vue安装jQuerynpm i ...
·
安装vue-cli脚手架工具
npm i -g vue-cli
- 查看vue是否安装成功及版本号
vue -V
使用vue-cli初始化项目
- vue init webpack project-name (vue init是vue-cli的命令,webpack是项目使用的模板模型,project-name是项目名称)
- 之后根据自己项目所需进行enter操作
vue安装jQuery
- npm i jquery -S
- 在module.exports = {} 最后添加
plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.ProvidePlugin({ jQuery: "jquery", $: "jquery" }) ]
- 如果项目使用了eslint,需要在.eslintrc.js文件中的module.exports的env对象里面加上
jquery: true
- 不需要再main.js引入,在对应的.vue文件里面直接使用即可
- 如果项目使用了eslint,需要在.eslintrc.js文件中的module.exports的env对象里面加上
vue安装bootstrap
npm i bootstrap -S
或者分两步走npm i bootstrap --save,npm i popper.js --save
- 在main.js中引入
import $ from 'jquery',import 'bootstrap/dist/css/bootstrap.min.css' ,import 'bootstrap/dist/js/bootstrap.min'
安装Popper.js
安装sass-loader
npm install sass-loader --save,在安装node-sass,因为sass-loader依赖于node-sass,npm i node-sass --save
- 在webpack.base.conf.js文件中添加如下代码
{ test: /\.sass$/, loaders: ['style', 'css', 'sass'] }
- 直接使用即可
Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won’t work.
- npm run dev 是开发环境
- npm run build 是生产环境
- build后生成的dist下面的代码,必须要在服务器根目录下面才能打开,否则就会报这个错误
- 可以通过在webpack.prod.conf.js的output对象添加一个属性:publicPath: './'
- 使用http-server
scss使用全局公共样式变量
- 安装sass-resources-loader
npm i sass-resources-loader --save
- 在vue项目的根目录下面的static新建一个文件夹style,下面新建一个公共scss文件,common.scss
- 修改build/util.js文件,
- 直接使用common.scss里面的变量样式即可
- 多个公共文件,resources使用数组
node-sass安装失败的解决方案
npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass
- 在webpack.base.conf.js的module的rules中添加
{ test: /\.sass$/, loaders: ['style', 'css', 'sass'] }
项目中使用iconfont
- 下载相应的iconfont到本地
- 在main.js中引入iconfont.css文件
- 项目中直接使用即可
改变router-link选中颜色的两种方式
<router-link to="/" active-class="active"></router-link>
- 在router/index.js文件中进行配置,
export default new Router({ linkActiveClass: 'active' })
更多推荐
已为社区贡献3条内容
所有评论(0)