如何启动一个Vue2.x项目

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

1. cd到工作目录
2. npm init -y
3. 先查看有没有安装全局的vue-cli,:vue-V,没有的话安装一下:npm install vue-cli
4. 创建项目: vue init webpack Luffy (项目名)
如果出问题: Mac安装Vue-cli时 提示bash: vue: command not found问题
http://www.cnblogs.com/wz2018/p/9849000.html

? Project name luffy
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? 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) (Use arrow keys)
❯ Yes, use NPM

5. 项目启动 npm run dev


目录结构:
build: 出口文件,webpack配置文件
src: 工作目录 main 主入口文件
index.js: 注册组件


component 创建组件,
app.vue 中注册

重启项目 需要cd 进入自己建立的项目下 然后 npm run dev


使用element-ui

1. 在 main.js 中写入以下内容：
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
加载: Vue.use(ElementUI);

2. MyHeader中添加组件
复制到组件中, 根据条件添加 data数据


添加路由:
1. component中建立组件,
2. 在index.js中注册组件 先导入组件, 有多少个注册多少个组件, path:'/', name:'xxx', component:组件名
3. template中 标签添加 :router="true"
4. app.vue中 添加 <router-view></router-view>


打包
npm run build


VUEX 组件通信
1. cd 到项目目录,安装 npm i vuex
2. 不解耦: 导入/use/实例化/注册
解耦: 新建store.js,导入vue,vuex/use/export, main.js导入,注册

以上是 如何启动一个Vue2.x项目 的全部内容， 来源链接： utcz.com/z/380060.html

回到顶部