06 创建Vue项目

day06 创建Vue项目

1、vue-cli创建vue项目

# 在cmd中执行

1.傻瓜式安装node: 
官网下载：https://nodejs.org/zh-cn/
    测试：node-v
    v16.14.0

2.安装cnpm: 
>: npm install -g cnpm --registry=https://registry.npm.taobao.org 
 # 因为npm比较慢，用淘宝的cnpm来替换npm

3.安装vue最新脚手架: 
>: cnpm install -g @vue/cli

注：如果2、3步报错，清除缓存后重新走2、3步
>: npm cache clean --force

2、创建项目

"""
前提：在目标目录新建luffy文件夹
>: cd 建立的luffy文件夹
>: vue create luffycity
"""

3、用pycharm打开

1、在terminal:
cd luffycity
npm run serve

2、配置pycharm

4、目录介绍

"""
├── luffycity
	├── public/          			# 项目共有资源
		├── favicon.ico				# 站点图标
		└── index.html				# 主页
    ├── src/      					# 项目主应用，开发时的代码保存
    	├── assets/      			# 前台静态资源总目录
    		├── css/				# 自定义css样式
    			└── global.css		# 自定义全局样式
    		├── js/					# 自定义js样式
				└── settings.js		# 自定义配置文件
			└── img/				# 前台图片资源
		├── components/    			# 小组件目录
		├── views/  				# 页面组件目录
		├── App.vue	    			# 根组件
		├── main.js	    			# 入口脚本文件
		├── router    		
			└── index.js			# 路由脚本文件
		store	    		
			└── index.js			# 仓库脚本文件
    ├── vue.config.js	    		# 项目配置文件
    └── *.*							# 其他配置文件
"""

# 任何组件都有三部分
template ：html相关的
style	:写css相关
script	：写js相关的

5、es6之导入导出语法

 # 导入导出语法
	-导出语法
    	export default {'showName': showName, 'name': name}
     -导入：
    	import Lqz from '../lqz'   // Lqz代指的就是导出的对象，以后使用Lqz. 调用即可
        
     -文件夹下如果有index.js   导入的时候，就不需要写 index.js,导到包这一层就可以了
    
    
 # 页面组件中使用子组件
	-编写一个xx.vue ,写好html，css，js
    -在要使用的地方，导入，注册
    import Header from "../components/Header";
    components:{
            Header
        }
    -在templates标签中之间根据名字使用即可

6、vue项目中axios的使用

# 步骤
	-安装  cnpm install -S axios
    -在组件中导入
      import ajax from 'axios'
    -使用
      created() {
            ajax.get('http://127.0.0.1:5000/').then(res => {
                console.log(res.data)
            })
        },

7、vue项目中elementui的使用

# 步骤
	-安装 npm i element-ui -S
    -配置main.js
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);
    -在组件中使用
    	复制好看的代码过来即可