JS框架-Vue-cli(4.0.5)

最新推荐文章于 2024-05-16 13:10:03 发布

繁花灬落幕

最新推荐文章于 2024-05-16 13:10:03 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/yjl15517377095/article/details/102983788

版权

安装

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>
    <!-- built files will be auto injected -->
  </body>

node_modules

包含package.json里的依赖，上传项目或将项目发给别人时一般不会给这个文件夹（因为太大，小文件太多）
恢复依赖命令：会自动读取package.json来下载依赖

npm install

src > assets：存放静态文件（css、js、image）
src > components：组件，命名规则大写字母开头，驼峰式

连接关系

public > index.html是入口文件，其他地方写的东西最后都体现到<div id="app"></div>里
src > main.js是第二个执行的文件，它把app.vue挂载到index.html里的<div id="app"></div>，所以要注意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>

繁花灬落幕

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JS框架-Vue-cli(4.0.5)

文章目录安装创建安装npm install -g @vue/cli创建创建vue create project-name选择安装方式(默认、自定义[√])> default (babel, eslint) Manually select features >(*) Babel ( ) TypeScript ( ) Progressive Web App ...
复制链接

扫一扫