网站 建设 初期规划,科技企业网站设计,觅知网是免费的吗,app定制价格vue-cli创建项目、vue项目目录结构、 ES6导入导出语法、vue项目编写规范
1 vue-cli创建项目
1.1 vue-cli 命令行创建项目 1.2 使用vue-cli-ui创建
2 vue项目目录结构
2.1 运行vue项目 2.2 vue项目的目录结构
3 es6导入导出语法
4 vue项目编写规范
4.1 修改项目 4.2 以后…vue-cli创建项目、vue项目目录结构、 ES6导入导出语法、vue项目编写规范
1 vue-cli创建项目
1.1 vue-cli 命令行创建项目 1.2 使用vue-cli-ui创建
2 vue项目目录结构
2.1 运行vue项目 2.2 vue项目的目录结构
3 es6导入导出语法
4 vue项目编写规范
4.1 修改项目 4.2 以后写vue项目只需要在固定位置写固定代码即可 1 vue-cli创建项目
# 单页面应用spa-以后vue项目就只有一个 xx.html 页面-定义很多组件不可能都写在 xx.html中把
# 单文件组件一个组件一个文件https://v2.cn.vuejs.org/v2/guide/single-file-components.html #ad# 一个组件中有的东西1 html内容以后html都放在 template标签中2 css内容 以后都放在 style 标签中3 js内容: 以后都放在 script标签中# 使用vue-cli 创建vue项目才能使用 单文件组件-vue脚手架创建出vue的项目里面带了很多基础代码-类似于django-admim命令可以创建出django项目# vue-cli脚手架# vue2中使用创建vue项目的软件必须用vue-cli# vue3中可以使用vue-cli也可也使用vite创建vite号称新一代的构建工具
# 使用vue-cli创建vue项目 步骤1 vue-cli是个软件运行在nodejs环境中安装nodejs-下载地址https://nodejs.p2hp.com/download/-类似于python解释器一路下一步安装---》选择安装位置---》添加到环境变量(以后再任意位置执行node或npm都会找到)-查看node版本node -v-安装完释放两个可执行文件node 等同于 pythonnpm 等同于 pip2 npm 安装第三方模块速度很慢淘宝做了个cnpm以后咱们可以使用cnpm替代npm会去淘宝镜像站下载速度快npm install -g cnpm --registryhttps://registry.npm.taobao.org# 以后 使用npm安装模块的命令全都换成 cnpm3 在node环境中装vue-cli 类似于装djangocnpm install -g vue/cli4 装完脚手架会多出一个命令 vue 用来创建vue项目 等同于djagno-admin命令5 使用脚手架创建vue项目 vue create 项目名# vue create myfirstvue 1.1 vue-cli 命令行创建项目
1 vue create 项目名vue create vue_first2 选择入下图
3 选择BabelRoutervuexBabel语法转换Router页面跳转 路由效果vuex状态管理器存储数据的3 选vue版本
4 选package.json
5 之前的设置保存与不保存都可以...等待即可 1.2 使用vue-cli-ui创建
按住winR,打开cmd窗口然后输入cd 路径再输入 vue ui这会启动出一个服务直接在浏览器中点点击就可以创建vue的项目2 vue项目目录结
--编写vue项目使用编辑器---》pycharm--使用pycharm打开vue项目2.1 运行vue项目
1.方式一命令行中 一定要注意路径npm run serve2.方式二使用pycharm运行 ---》点击绿色箭头配置一个启动脚本以后点绿色箭头运行即可2.2 vue项目的目录结构
vue_first # 项目名-node_modules # 文件夹放了该项目所有的依赖很小很多以后把项目传给别人这个要删除 别人拿到执行 cnpm install 安装依赖-public # 文件夹-favicon.ico # 小图标浏览器上面显示可以替换-index.html # spa这个html是整个项目的一个html 你不要动-src # 以后动这里面的东西所有代码都在者-assets # 文件夹放一些静态资源图片jscss-components # 以后小组件写在里面 xx.vue-HelloWorld.vue # 默认提供了一个组件-router # 装了vueRouter就会有这个文件夹如果不装就没有现在不用关注-index.js-store # 装了vuex就会有不装就没有 -index.js-views # 文件夹里面放了所有页面组件-AboutView.vue # 首页组件-HomeView.vue # 关于组件 - App.vue # 跟组件- main.js # 项目启动的入口文件核心-.gitignore # git相关后面学了就会了-README.md # 项目介绍-package.json # 重要存放依赖-vue.config.js # vue项目的配置文件-package-lock.json # 锁定文件babel.config.js # babel的配置不用管jsconfig.json### 总结
以后只需要关注src文件夹下的文件即可3 es6导入导出语法
# 导出语法 1 项目中创建包创建要给文件夹 lin2 在包下创建 package.js3 在文件中写js代码var name lqzfunction add(a, b) {return a b}4 默认导出 对象 export default {add:add,name:name}5 命名导出 导出了两个变量export const name 彭于晏export const add (a, b) {return a * b}# 导入语法# 默认导出的导入1 在任意的js中import 起个名字 from ./lin/package2 使用导入的包起个名字.导出的字段# 命名导出的导入1 在任意的js中import {name,add} from ./lin/package2 直接用即可3.1 自建文件lin/package.js
// 自定义变量和方法
// let name lin// function add(a, b) {
// console.log(name)
// return a b
// }// 导出
// 1.默认导出3中导出法// 1.1
export default {name,add
}// 1.2
// export default {
// name: name,
// add: add
// }// 1.3
// export default {
// name: name,
// add: function (a, b) {
// return a b
// }
// }// 2.命名导出导出了两个变量export const name 彭于晏
// export const addfunction (a, b) {
// return a * b
// }
// 改为箭头函数
export const add (a, b) a * b
3.2 main.js
在main.js文件中加入下面代码// console.log(我执行了)
// 演示使用刚刚写的包中的js代码// 导入默认导出的导入
import lin from ./lin/package
let res lin.add(3, 5)
console.log(res)
console.log(lin.name)// 导入命名导出的导入
import {add, name} from ./lin/package
console.log(add(5, 6))
console.log(name) 4 vue项目编写规范 4.1 修改项目
App.vue
templatediv idapprouter-view/router-view/div
/templateHomeView.vue
templatediv classhome/div
/templatescript
export default {name: HomeView,
}
/scriptAboutView.vue
templatediv classabouth1This is an about page/h1/div
/template4.2 以后写vue项目只需要在固定位置写固定代码即可
1 只需要创建页面组件IndexView.vue2 里面有三部分2.1 template 必须只能有一个标签以后所有的html都写在这里templatediv classhomeh1我是首页/h1button clickhandleClick点我看美女/button/div/template2.2 script 标签写js代码scriptexport default {name: HomeView,data(){return {}},methods: {handleClick() {alert(美女)}}}/script2.3 所有的样式写在stylestyleh1{font-size: 80px;}/style
