JS框架-Vue-cli(4.0.5)
文章目录
- 安装
- 创建
- 结构分析
- README.md
- package.json
- package-lock.json
- babel.config.js
- .gitignore
- pubic > favicon.ico
- pubic > index.html
- node_modules
- 连接关系
- vue.config.js
- 组件引入
- 全局
- 局部
- json-server
- 启动
- 匹配
- 常用框架安装
- jquery
- Bootstrap
- sass
安装
npm install -g @vue/cli
创建
创建
vue create project-name
选择安装方式
default (babel, eslint) //默认
> Manually select features //自定义
选择安装的功能(空格选择，a全/反选)
>(*) Babel // 支持ES6语法编译，推荐
( ) TypeScript // TS
( ) Progressive Web App (PWA) Support
( ) Router // vue-router
( ) Vuex // vuex
( ) CSS Pre-processors // scss
( ) Linter / Formatter // 语法检查
( ) Unit Testing // 测试
( ) E2E Testing // 测试
In dedicated config files
> In package.json
是否保存以上设置为自定义安装方式
? Save this as a preset for future projects? (y/N)
结构分析
README.md
说明文档，内容简概如下
npm install //安装插件
npm run serve //启动服务
npm run build //打包(打包为正常的js/css/html文件)
package.json
/* ... */
"name": "vuecli-demo",
"version": "0.1.0",
"private": true,
"scripts": {
/*指定启动语句为 npm run serve
假如这里修改为dev,则启动语句为 npm run dev
有一个特殊的词为start,启动语句为 npm start*/
"serve": "vue-cli-service serve",
/* 加上--open可以编译完自动打开网址
vue-cli-service serve --open */
/*指定打包的语句*/
"build": "vue-cli-service build"
},
//项目必须依赖的插件
"dependencies": {
"core-js": "^3.3.2", //编译js的
"vue": "^2.6.10"
},
//项目用到的插件
"devDependencies": {
"@vue/cli-plugin-babel": "^4.0.0",
"@vue/cli-service": "^4.0.0",
"vue-template-compiler": "^2.6.10"
},
/* ... */
package-lock.json
没用，可以删了
babel.config.js
配置babel(ES新语法编译功能)
.gitignore
指定要忽略上传到git的文件，大概如下
.DS_Store
node_modules //插件，占用空间很大
/dist
# local env files //本地的环境变量
.env.local
.env.*.local
# Editor directories and files
.idea
.vscode //vscode生成的文件
pubic > favicon.ico
网页图标
pubic > index.html
主入口文件，其他地方写的所有文件最终都会动态引入到这里
可以在这个文件引入全局的css，也可以用npm
<body>
<noscript>
<strong>We're sorry but vuecli-demo doesn't work properly without JavaScript enabled. Please enable it to continue.strong>
noscript>
<div id="app">div>
body>
node_modules
包含package.json里的依赖，上传项目或将项目发给别人时一般不会给这个文件夹（因为太大，小文件太多）
恢复依赖命令：会自动读取package.json来下载依赖
npm install
src > assets：存放静态文件（css、js、image）
src > components：组件，命名规则 大写字母开头，驼峰式
连接关系
public > index.html是入口文件，其他地方写的东西最后都体现到里src > main.js是第二个执行的文件，它把app.vue挂载到index.html里的，所以要注意app名字要一样
/* ... */
import App from './App.vue'
/* ... */
new Vue({
render: h => h(App),
}).$mount('#app')
vue.config.js
const webpack = require('webpack')
module.exports = {
publicPath: '/', // 项目根
outputDir: 'dist', // 打包存放目录
devServer: {
port: 8888 // 端口
}
}
组件引入
全局
在main.js里引入的组件是全局组件
import User from './components/User'; //引入
Vue.component('user',User); //使用
局部
例如
<HelloWorld />
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
HelloWorld
}
}
json-server
启动
npm install -g json-server //安装
json-server --watch db.json //启动
匹配
{
"users":[
{"id":1,"name":"sam","age":18,"classId":1},
{"id":2,"name":"tom","age":21,"classId":1},
{"id":3,"name":"jack","age":20,"classId":2}
],
"class":[
{"id":1,"name":"yiban"},
{"id":2,"name":"erban"}
]
}
所有user
http://localhost:3000/users
指定id的user(user必须有id字段才可用)
http://localhost:3000/users/1
classId为1的所有user(user必须有’对象名’+'Id’字段)
http://localhost:3000/class/1/users
条件：name为sam的user，name为sam且age为18的user，name为sam和tom的user
http://localhost:3000/users?name=sam
http://localhost:3000/users?name=sam&age=18
http://localhost:3000/users?name=sam&name=tom
分页：每页显示2条，当前为第一页
http://localhost:3000/users?_page=1&_limit=2
排序：按age升序(asc)排序，按age降序(desc)排序
http://localhost:3000/users?_sort=age&_order=asc
http://localhost:3000/users?_sort=age&_order=desc
比较：年龄大于等于(gte)18的user，年龄小于等于(lte)18的user
http://localhost:3000/users?age_gte=18
http://localhost:3000/users?age_lte=18
查询：查询字段值(所有字段都查)包含m的所有user
http://localhost:3000/users?q=m
常用框架安装
jquery
- npm安装
npm install jquery
- 在项目根目录打开(创建)
vue.config.js
const webpack = require('webpack')
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'window.$': 'jquery'
})
]
}
}
Bootstrap
- npm安装
npm install bootstrap
- main.js添加
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
- popper依赖
npm install popper
sass
npm 依次执行
npm install --save-dev css-loader
npm install --save-dev sass-loader
npm install --save-dev style-loader
set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/
npm install node-sass
在vue.config.js(没有的话手动新建)添加
module.exports = {
configureWebpack: {
/* ... ... */
rules:[
/* ... ... */
{
test: /\.sass$/,
loaders: ['style', 'css', 'sass']
}
]
}
}
使用方法，加一个lang="scss"
<style lang="scss">
$color_hot: red;
#aaa{
color:$color_hot;
}
style>