2020.06.11 -

vue新建项目:

1、进入到vue项目要放置的路径下(例如desktop),新建vue项目,指令 vue init  webpack +项目名称.
    例如:执行指令 vue init webpack helloworld ,则会在当前(desktop)路径下创建一个名为firstvue的文件夹,这个文件夹就是新建的vue项目,执行上述命令后,这个项目的相关文件都会在helloworld这个文件夹下自动生成。

2、上一步之后就会开始新建项目,询问项目的相关配置。一路yes省事儿没啥问题

3、进入到项目的文件夹(helloworld)下,
    $ \desktop> cd helloworld
    $ \desktop\helloworld> 

4、运行项目,指令 npm run dev ,正常情况下会输出 Your application is running here: http://localhost:8081
    $ \desktop\firstvue> npm run dev

5、在浏览器中打开 http://localhost:8081,能看到vue的大logo图片。

至此,vue项目新建完毕!

vue 项目安装 运行:

克隆项目

git clone https://github.com/PanJiaChen/vue-element-admin.git
//git 下载到本地

进入项目目录

cd vue-element-admin //进入当前目录

安装依赖

npm install

建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题

npm install –registry=https://registry.npm.taobao.org
cnpm install –registry=https://registry.npm.taobao.org

本地开发 启动项目

npm run dev

新建项目后引入新插件都需要在当前项目里面安装相关插件:

例如:

npm i element-ui -S

npm install axios

然后在 \helloworld\src\main.js 引入

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'
import axios from 'axios'


Vue.use(ElementUI);
Vue.config.productionTip = false
Vue.prototype.$http = axios;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

- END -

237
0

已关闭回复!

常用的CSS命名规范

文本命名规范 index.css: 一般用于首页建立样式 head.css: 头部样式,当多个页面头部设计风格 […]